<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>评论与课程数据获取</title>
    <link rel="stylesheet" href="../static/css/dashboard.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      .content-container {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }
      .search-container {
        margin-top: 30px;
        text-align: center;
      }
      .search-container input {
        width: 70%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      .search-container button {
        padding: 10px 20px;
        margin-left: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
      }
      .search-container button:hover {
        background-color: #0056b3;
      }
      .comment-container,
      .course-container {
        margin-top: 20px;
        max-height: 400px;
        overflow-y: auto;
        padding-right: 10px;
      }
      .comment,
      .course {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
      }
      /* 设置评论和课程区域为上下排列 */
      .section-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .section-container .search-box {
        width: 70%; /* 每个搜索框占据70%的宽度 */
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container mt-5">
      <!-- 导航栏 -->
      <nav class="navbar">
        <img
          src="../static/image/cutcamera.png"
          alt="用户头像"
          style="
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
          "
        />
        <a href="{{ url_for('center') }}">
          <button class="nav-button" id="center-btn">个人中心</button>
        </a>
        <a href="{{ url_for('account') }}">
          <button class="nav-button" id="account-btn">账号安全</button>
        </a>
          <a href="{{ url_for('guide') }}">
              <button class="nav-button" id="guide-btn">使用指南</button>
          </a>
        <a href="{{ url_for('crawler') }}">
          <button class="nav-button">评论数据获取</button>
        </a>
        <a href="{{ url_for('exploration') }}">
          <button class="nav-button">探索型数据分析</button>
        </a>
        <button class="nav-button" id="logout-btn">退出登录</button>
      </nav>

      <!-- 课程搜索框 -->
      <div class="search-box">
        <form
          id="course-search-form"
          action="{{ url_for('course_search') }}"
          method="POST"
          class="search-container"
        >
          <input
            type="text"
            name="course_name"
            id="search-box"
            placeholder="请输入课程名称..."
            value="{{ course_query }}"
            required
          />
          <button type="submit">搜索课程</button>
        </form>
        <!-- 课程结果 -->
        <div id="courses-result">
          {% if courses %}
          <div class="text-center mt-3">
            <button
              class="btn btn-primary"
              type="button"
              data-toggle="collapse"
              data-target="#courses-section"
              aria-expanded="false"
              aria-controls="courses-section"
            >
              查看课程
            </button>
          </div>
          <!-- 可折叠课程容器 -->
          <div class="collapse mt-3" id="courses-section">
            <div class="course-container">
              {% for course in courses %}
              <a class="dropdown-item" href="{{ course }}" target="_blank"
                >{{ course }}</a
              >
              {% endfor %}
            </div>
          </div>
          {% elif course_query %}
          <div class="alert alert-warning" role="alert">
            没有找到课程或无法爬取数据。
          </div>
          {% endif %}
        </div>
      </div>

      <!-- 评论搜索框区域 -->
      <div class="section-container">
        <!-- 评论搜索框 -->
        <div class="search-box">
          <form
            id="comment-search-form"
            action="{{ url_for('crawler') }}"
            method="POST"
            class="search-container"
          >
            <input
              type="text"
              name="query"
              id="course-search-box"
              placeholder="请输入评论所在页面的链接..."
              value="{{ search_query }}"
              required
            />
            <button type="submit">爬取评论</button>
          </form>
          <!-- 评论结果 -->
          <div id="comments-result">
            {% if comments %}
            <div class="text-center mt-3">
              <button
                class="btn btn-primary"
                type="button"
                data-toggle="collapse"
                data-target="#comments-section"
                aria-expanded="false"
                aria-controls="comments-section"
              >
                查看评论
              </button>
            </div>
            <!-- 可折叠评论容器 -->
            <div class="collapse mt-3" id="comments-section">
              <div class="comment-container">
                {% for comment in comments %}
                <div class="comment">{{ comment }}</div>
                {% endfor %}
              </div>
            </div>
            {% elif search_query %}
            <div class="alert alert-warning" role="alert">
              没有找到评论或无法爬取数据。
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <!-- 引入 Bootstrap 和依赖库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
  </body>
</html>
